<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/assets/javascript/popup/popup.js"></script>
    <script src="/assets/javascript/popup/orderpopup.js"></script>
    <link rel="stylesheet" href="/assets/styles/search.css">
</head>
<body style="overflow-x:hidden;background:#f3f3f3;">
<div id="orderList">
    <div id="mask_shadow"></div>
    <div class="btn-div">
        <button type="button" class="btn btn-primary" @click="refreshPage">刷新</button>
        <button type="button" class="btn btn-primary" id="checked" @click="orderCheck">预检</button>
        <button type="button" class="btn btn-primary" id="route" @click="updateRoute">路由</button>
        <button type="button" class="btn btn-primary" onclick="cancel()">取消</button>
        <button type="button" class="btn btn-primary" id="outstock" @click="outputOrder">出库</button>
        <button type="button" class="btn btn-primary" id="return" data-toggle="modal" data-target="#demoModal" @click="toRequestForGoods">退货</button>
        <button type="button" class="btn btn-primary" id="exchange" data-toggle="modal" data-target="#demoModal" @click="toRequestForGoods">换货</button>
        <button type="button" class="btn btn-primary" id="MyAbnormalModel" @click="orderDetails">查看订单</button>
        <div class="search-box">
            <form action="">
                <select  v-model="selected">
                    <option v-for="option in options3"  :value="option.value">
                        {{ option.text }}
                    </option>
                </select>
                <input placeholder="编辑我……"  v-model.trim="searchInput3">
                <button type="button" class="btn btn-success"   @click="searchBtn3">搜索</button>
            </form>
        </div>
    </div>
    <div>
        <table class="table table-condensed">
            <thead>
            <tr>
                <th>批量</th>
                <th>订单编码</th>
                <th>订单状态</th>
                <th>订单来源</th>
                <th>支付方式</th>
                <th>仓库备注</th>
                <th>订单总价</th>
                <th>发送仓库</th>
                <th>物流公司</th>
                <th>物流单号</th>
                <th>收货人</th>
                <th>收货地址</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="list in orderListDate.list" v-cloak>
                <tr>
                    <td>
                        <input type="checkbox" :value="list.orderId" v-model="checkedNames" />
                    </td>
                    <td>{{list.orderCode}}</td>
                    <td>{{list.orderState}}</td>
                    <td>{{list.orderSource}}</td>
                    <td>{{list.paymentWay}}</td>
                    <td>{{list.basicState}}</td>
                    <td>{{list.sumPrice}}</td>
                    <td>{{list.deliveryWarehouse}}</td>
                    <td>{{list.deliveryCompany}}</td>
                    <td>{{list.deliveryCode}}</td>
                    <td>{{list.receiverName}}</td>
                    <td>{{list.receiverState+"省"+list.receiverCity+"市"+list.receiverDistrict+"区"+list.receiverAddress}}</td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <div class="footer-pager">
        <!--解析显示分页信息-->
        <!--分页文字信息-->
        <span>共{{orderListDate.pages}}页，当前第{{orderListDate.pageNum}}页，总{{orderListDate.total}}条数据</span>
        <!--分页条信息-->
        <ul class="pagination">
            <!--如果无上一页，不可点-->
            <template v-if="orderListDate.hasPreviousPage==false">
                <li><a href="#">&laquo;</a></li>
            </template>
            <!--如果有上一页，可点-->
            <template v-if="orderListDate.hasPreviousPage==true">
                <!--点前一页，跳到当前页码前一页-->
                <li @click="to_page(orderListDate.pageNum-1)"><a href="#">&laquo;</a></li>
            </template>

            <!--遍历连续显示的页码-->
            <template v-for="pagenum in orderListDate.navigatepageNums">
                <!--如果是当前页码，高亮显示-->
                <template v-if="pagenum==orderListDate.pageNum">
                    <li class="active"><a href="#">{{pagenum}}</a></li>
                </template>
                <!--如果不是当前页码，正常显示-->
                <template v-if="pagenum!=orderListDate.pageNum">
                    <!--点击后把当前页码传送给axios-->
                    <li class @click="to_page(pagenum)"><a href="#">{{pagenum}}</a></li>
                </template>
            </template>

            <!--如果无下一页，不可点-->
            <template v-if="orderListDate.hasNextPage==false">
                <li><a href="#">&raquo;</a></li>
            </template>
            <!--如果有下一页，可点-->
            <template v-if="orderListDate.hasNextPage==true">
                <!--把当前页码的下一页传送给axios-->
                <li @click="to_page(orderListDate.pageNum+1)"><a href="#">&raquo;</a></li>
            </template>
        </ul>
    </div>
    <div id="popup" class="popup">
        <div class="title">
            <p>订单详情</p>
            <span></span>
            <span>x</span>
        </div>
        <div class="cont">
            <iframe src="" scrolling="auto" id="iframeId3" style="width:100%;height:100%;border:0px;"></iframe></div>
    </div>
    <!--yonyong弹窗界面-->
    <!--<div v-if="status=='exist'">-->
    <div>
        <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">退货换货</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal refund" role="form">
                            <div class="form-group ">
                                <!--<label for="fiarstnme" class="col-sm-2 control-label">订单号:</label>-->
                                <div class="col-sm-10">
                                    订单号:&nbsp;&nbsp;&nbsp;<input type="text" id="fiarstnme" :value="orderId" style="border:0;" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <table class="table table-condensed" >
                                        <thead>
                                        <tr>
                                            <th>商品ID</th>
                                            <th>商品编码</th>
                                            <th>商品名称</th>
                                            <th>商品单价</th>
                                            <th>退货数量</th>
                                            <!--<th>商品总价</th>-->
                                        </tr>
                                        </thead>
                                        <template v-for="(test,index) in orderGoodsInfo">
                                            <tr>
                                                <td>{{test[0].goodsId}}</td>
                                                <td>{{test[0].goodsCode}}</td>
                                                <td>{{test[0].goodsName}}</td>
                                                <td>{{test[0].goodsPrice}}</td>
                                                <td class="refund">
                                                    <div class="control-btn">
                                                        <div class="control-btn">
                                                            <button type="button"  class="subtract" @click="countDown(index)">-</button>
                                                            <input type= "text" class="txtnum" v-model="test[0].goodNum" style="width: 22px;">
                                                            <button  type="button"  class="plus" @click="countUp(index)">+</button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <!--<td>1000</td>-->
                                                <td></td>
                                            </tr>
                                        </template>
                                    </table>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary save"  data-dismiss="modal" id="save" @click="exchangeReturn">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#popup').popup();
            $("body").css("overflow-y", "hidden");
        });

        /*$('#orderpopup').orderpopup();*/
        $("body").css("overflow-y", "hidden");
        $("#search-btn").click(function (){
            var valSelect=$("#select option:selected").val();
            var valInput=$("#search-input").val();
            var reg = /^\d{1,11}$/;
            if (valSelect=="orderId"){
                if (reg.test(valInput)){
                    return true;
                }else {
                    alert("输入错误");
                }
            }
        });
    </script>
</div>
<script src="/commons/plugins/iview/js/vue.min.js"></script>
<script src="/commons/plugins/iview/js/vue-router.js"></script>
<script type="text/javascript" src="/commons/plugins/iview/js/axios.min.js"></script>
<script type="text/javascript" src="/commons/js/axiosUtils.js"></script>
<script type="text/javascript" src="/page/js/orderList.js"></script>
<script src="/assets/javascript/check.js"></script>
<script type="text/javascript" src="/page/js/cancel.js"></script>
</body>
</html>